import React from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList
} from "react-native";

const DATA = [
  {
    title: "魏国",
    data: ["曹操", "司马懿", "张辽"]
  },
  {
    title: "蜀国",
    data: ["刘备", "关羽", "张飞", "诸葛亮"]
  },
  {
    title: "吴国",
    data: ["孙权", "周瑜", "鲁肃"]
  }
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const SectionListDemo = () => (
  <SafeAreaView style={styles.container}>
<SectionList
  sections={DATA}
  keyExtractor={(item, index) => index}
  renderItem={({ item }) => <Item title={item} />}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
/>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 10,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 10,
    marginVertical: 5
  },
  header: {
    fontSize: 32,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 20
  }
});

export default SectionListDemo;
